<template>
  <div class="page-view">
    <div class="outer">
      <TIM
        ref="tim"
        :group-id="12345"
        @ready="ready = $event"
      />
    </div>
    <div class="input-btn">
      <EmojiInput
        ref="emojiInput"
        class="emoji-input"
      />
      <van-button
        slot="button"
        size="small"
        type="primary"
        :disabled="!ready"
        @click="sendMsg"
      >
        发送
      </van-button>
    </div>
    <EmotionComp
      ref="emotionComp"
      @appendInputValue="appendMessageText"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    EmotionComp: () => import('components/Live/EmotionComp.vue'),
    TIM: () => import('components/Live/TIM.vue'),
    EmojiInput: () => import('components/Live/Chat/EmojiInput.vue'),
  },
  data () {
    return {
      msg: '',
      ready: false,
    }
  },
  methods: {
    // sendMsg () {
    //   if (!this.msg || !this.msg.trim()) {
    //     return
    //   }
    //   (this.$refs.tim as any).sendMsg(this.msg.trim()).then(() => {
    //     this.msg = ''
    //   })
    // },
    sendMsg () {
      const editor = this.$refs.emojiInput as any
      const content = editor.getContent()
      if (!content) {
        return
      }
      (this.$refs.tim as any).sendMsg(editor.getContent()).then(() => {
        // this.msg = ''
        editor.clearContent()
      })
    },
    appendMessageText (emojiName: String) {
      (this.$refs.emojiInput as any).insertEmoji(emojiName)
      console.log(emojiName, 'emojiName')
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.outer {
  flex: 1;
  overflow: hidden;
}

.input-btn {
  display: flex;
  align-items: center;
  background: #fff;
}
.emoji-input {
  flex: 1;
  border-radius: 30px;
}
</style>
